<template>
    <el-container>
        <el-header style="height: 50px;border-bottom: none">
            <div class="left-panel">
                <sc-import-button :auth="'saledetail.import'" :apiObj="importObj" :base="base + '/file_templets/temples_sale.xlsx'" @importSuccess="importSuccess" ></sc-import-button>
                <sc-export-button :auth="'saledetail.export'" :apiObj="apiObj" :search="search" :selection="selection"></sc-export-button>
                <div class="finish">
                    <div class="finishNum">总匹数:<div class="text">{{ total_stock.count }}</div></div>
                    <div class="finishNum">总销售额:<div class="text">{{ total_stock.contract_price }}</div></div>
                    <div class="finishNum">总清关费:<div class="text">{{ total_stock.total_clear_price }}</div></div>
                    <div class="finishNum">净销售额:<div class="text">{{ total_stock.jing_price }}</div></div>
                </div>
                <el-button type="primary">明细统计</el-button>
                <el-button type="primary">客户排行</el-button>
                <el-button type="primary" color="#6074e8" @click="open_export(1)" :auth="'saledetail.export'">销售汇总</el-button>
                <el-button type="primary" color="#6074e8" @click="open_export(2)" :auth="'saledetail.export'">销售均价</el-button>
            </div>
        </el-header>
        <el-header>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.search_keyword"  class="input-with-search" style="width: 300px" @keyup.enter="upsearch">
                        <template #prepend>
                            <el-select v-model="search.search_field" filterable clearable placeholder="请选择" style="width: 110px">
                                <el-option label="销售单号" value="contract_code"/>
                                <el-option label="品名" value="goods_name"/>
                                <el-option label="布卷条码" value="roll_code"/>
                            </el-select>
                        </template>
                    </el-input>
                    <sc-auto-complete style="margin:5px;width: 180px" v-model="search.customer_name" :api="$API.basic.client.list" :params-key="'keyword'" :rows-key="'rows'" :value-key="'customer_name'" placeholder="客户" @select="getCustomer"/>
                    <sc-auto-complete style="margin:5px;width: 180px" v-model="search.flower" :api="$API.basic.allFlower" :additionalParams="{type: 2}" :params-key="'flower'" :rows-key="'rows'" :value-key="'flower'" placeholder="花型" @select="getFlower"/>
                    <sc-auto-complete style="margin:5px;width: 180px" v-model="search.goods_code" :api="$API.basic.goods.list" :params-key="'code'" :rows-key="'rows'" :value-key="'code'" placeholder="货号" @select="getGoodsCode"/>
                    <sc-auto-complete style="margin:5px;width: 180px" v-model="search.apply_name" :api="$API.basic.apply.list" :params-key="'keyword'" :rows-key="'rows'" :value-key="'apply_name'" placeholder="供应商" @select="getApply"/>
                    <el-select v-model="search.area_id" placeholder="地区" filterable clearable>
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <el-date-picker v-model="search.contract_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" :params="search" border @setExtend="setExtend" tableName="saleDetail" :column="saleDetailColumn" :pageSize="1000" @cell-click="cellClick">
                 <!-- @cell-click="cellClick" -->
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
                <!-- <el-table-column label="销售日期" prop="contract_date" align="center"></el-table-column>
                <el-table-column label="销售单号" prop="contract_code" align="center"></el-table-column>
                <el-table-column label="客户" prop="contract.customer.customer_name" align="center"></el-table-column>
                <el-table-column label="品名" prop="inspect.goods_name" align="center"></el-table-column>
                <el-table-column label="货号" prop="inspect.goods_code" align="center"></el-table-column>
                <el-table-column label="颜色" prop="inspect.colorName.name" align="center"></el-table-column>
                <el-table-column label="花型" prop="inspect.flower" align="center"></el-table-column>
                <el-table-column label="指导价" prop="zd_price" align="center"></el-table-column>
                <el-table-column label="码数" prop="inspect.code_number" align="center"></el-table-column>
                <el-table-column label="销售价" prop="sales_price" align="center"></el-table-column>
                <el-table-column label="折码" prop="inspect.folding.name" align="center"></el-table-column>
                <el-table-column label="总金额" prop="total_price" align="center"></el-table-column>
                <el-table-column label="操作员" prop="contract.create_staff_name" align="center"></el-table-column>
                <el-table-column label="条码" prop="roll_code" align="center"></el-table-column> -->
            </scTable>
        </el-main>
        <select-house v-if="dialog.house" ref="houseDialog" @success="houseBack" @closed="dialog.house = false" :query="query"></select-house><!-- 入库记录 -->
        <el-dialog :title="export_type == 1 ? '销售汇总' : '销售均价'" width="500" v-model="dialog.sale_date" align-center draggable overflow>
            <el-form label-position="top">
                <el-form-item label="日期">
                    <el-date-picker v-model="contract_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="sale_print">打印</el-button>
            </template>
        </el-dialog>
        <average-print v-if="dialog.average" ref="averageDialog" @success="averageBack" @closed="dialog.average = false"></average-print>
        <total-print v-if="dialog.total" ref="totalDialog" @success="totalBack" @closed="dialog.total = false"></total-print>
    </el-container>
</template>

<script>
import SelectHouse from '@/views/business/selectHouse.vue';
import AveragePrint from './averagePrint.vue';
import TotalPrint from './totalPrint.vue';
export default {
    name: '在库明细',
    components: {
        SelectHouse,
        AveragePrint,
        TotalPrint
    },
    data() {
        return {
            dialog: {
                house: false,
                sale_total: false,
                sale_date: false,
                average: false,
                total: false,
            },
            apiObj: this.$API.business.sale.shopList,
            importObj: this.$API.business.sale.shop_import,
            selection: [],
            search: {
                customer_name: null,
                flower: null,
                goods_code: null,
                apply_name: null,
                area_id: null,
                contract_date: [this.moment().subtract(1, 'days').format('YYYY-MM-DD'), this.moment().subtract(1, 'days').format('YYYY-MM-DD')],
                search_keyword: "",
                search_field: "contract_code",
            },
            total_stock: {
                count: 0,
                contract_price: 0,
                total_clear_price: 0,
                jing_price: 0,
            },
            areaList: [],
            saleDetailColumn: [
                {label: "销售日期", prop: "contract_date", width: 114},
                {label: "销售单号", prop: "contract_code", width: 174},
                {label: "客户", prop: "contract.customer.customer_name", width: 157},
                {label: "品名", prop: "inspect.goods_name", width: 140},
                {label: "货号", prop: "inspect.goods_code", width: 110},
                {label: "颜色", prop: "inspect.color_en", width: 130},
                {label: "花型", prop: "inspect.flower", width: 157},
                {label: "指导价", prop: "zd_price"},
                {label: "码数", prop: "inspect.code_number"},
                {label: "销售价", prop: "sales_price", width: 100},
                {label: "折码", prop: "inspect.folding"},
                {label: "总金额", prop: "total_price", width: 100},
                {label: "操作员", prop: "inspect.work_uids_name", width: 150},
                {label: "条码", prop: "roll_code", width: 130},
            ],
            contract_date: [this.moment().format('YYYY-MM-DD'),this.moment().format('YYYY-MM-DD')],
            export_type: 0
        }
    },
    mounted() {
		this.getArea();
    },
    methods: {
        /**单元格点击*/
		cellClick(row, column) {
            let is_search = false;
            // for (const key in this.search) {
            //     this.search[key] = null;
            // }
            let keyword = ""
            let field = ""
            if(column.property == 'contract_code'){
                keyword = row.contract_code
                field = "contract_code"
                is_search = true;
            }else if(column.label == '客户'){
                this.search.customer_name = row.contract?.customer?.customer_name
                is_search = true;
            }else if(column.label == '品名'){
                keyword = row.inspect?.goods_name
                field = "goods_name"
                is_search = true;
            }else if(column.label == '花型'){
                this.search.flower = row.inspect?.flower
                is_search = true;
            }else if(column.label == '货号'){
                this.search.goods_code = row.inspect?.goods_code
                is_search = true;
            }else if(column.property == 'roll_code'){
                keyword = row.roll_code
                field = "roll_code"
                is_search = true;
            }
            this.search.search_keyword = keyword
            this.search.search_field = field
            if(is_search){ 
                this.upsearch();
            }
		},
        setExtend(data){
            this.total_stock = data
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        upsearch(){
            this.$refs.table.upData(this.search)
        },
        refresh() {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.search.contract_date = [this.moment().subtract(1, 'days').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')],
            this.$refs.table.upData(this.search)
        },
        // 地区列表
		async getArea() {
			var res = await this.$API.basic.area.all.get();
			this.areaList = res.data
		},

        getCustomer(data){
            this.search.customer_name = data.customer_name
            this.upsearch()
        },

        getApply(data){
            this.search.apply_name = data.apply_name
            this.upsearch()
        },

        getGoodsCode(data){
            this.search.goods_code = data.code
            this.upsearch()
        },

        getFlower(data){
            this.search.flower = data.flower
            this.upsearch()
        },
        open_export(e){
            this.dialog.sale_date = true
            this.export_type = e
        },
        // 销售均价   /   销售汇总
        async sale_print(){
            this.dialog[this.export_type == 1 ? 'total': 'average'] = true
            this.$nextTick(() => {
				this.$refs[this.export_type == 1 ? 'totalDialog': 'averageDialog'].open('print').setData(this.contract_date)
			})
            this.dialog.sale_date = false
            // this.contract_date = [this.moment().format('YYYY-MM-DD'),this.moment().format('YYYY-MM-DD')]
            // var res = await this.$API.business.sale[this.export_type == 1 ? 'saleTotal': 'saleAveragePrice'].get({contract_date: this.contract_date})
            // if (res.code == 1) {
			// 	this.$message.success("导出成功");
            //     this.dialog.sale_date = false
            //     this.contract_date = []
			// 	window.location.href = res.data.url
			// } else {
			// 	this.$alert(res.message, "提示", {type: "error"});
			// }
        },
    }
}
</script>

<style lang="scss" scoped>
table{
    text-align: center ;
}
</style>
